.player-howto{
  position: relative;
  padding: 20px;
  background: #222;
  display: none;
  @media (min-width: $br-mobile) {
    display: block;
  }

  .player-box{
    width: 100%;
    @media (min-width: $br-mobile) {
      width: calc(100% - 225px);
    }

    .player-responsive{
      padding-bottom: 56.2790%;
      position: relative;
      overflow: hidden;
      iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  aside{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0 0 15px;
    -webkit-overflow-scrolling: touch;
    @media (min-width: $br-mobile) {
      position: absolute;
      height: 100%;
      width: 225px;
      overflow: hidden;
      top: 0;
      right: 0;
      padding: 0;
    }
    ul{
      position: relative;
      width: calc((150px * 5) + (20px * 4));
      height: auto;
      padding: 0px;
      @media (min-width: $br-mobile) {
        position: absolute;
        top: 20px;
        width: 100%;
        height: calc(100% - 40px);
        padding: 0px 20px 0 0;
        overflow: auto;
      }
      li{
        margin: 20px 0 0 20px;
        width: 150px;
        float: left;
        &:first-child{
          margin: 20px 0 0;
        }
        @media (min-width: $br-mobile) {
          margin: 20px 0 0;
          width: 100%;
          float: none;
          &:first-child{
            margin: 0;
          }
        }

        a{
          .img{
            position: relative;
            &:before, &:after{
              content: "";
              position: absolute;
              opacity: 0;
              visibility: hidden;
              @include transition(all 0.25s $easeInOutSine);
            }
            &:before{
              top: 50%;
              left: 50%;
              z-index: 3;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 15px 0 15px 25px;
              border-color: transparent transparent transparent $white;
              @include transform(translate(-50%,-50%));
            }
            &:after{
              top: 0;
              left: 0;
              z-index: 2;
              width: 100%;
              height: 100%;
              background: rgba($dark,0.75);
            }
            img{
              width: 100%;
              display: block;
              outline: none;
            }
          }
          h4{
            display: block;
            top: 0;
            color: $white;
            padding: 10px 0 0;
            font-size: 14px;
          }
          &:hover{
            .img{
              &:before, &:after{
                opacity: 1;
                visibility: visible;
              }
            }
          }
          &.visible{
            .img{
              &:before, &:after{
                opacity: 1;
                visibility: visible;
              }
            }
          }
        }
      }
    }
  }
}


.carrousel{
  padding: 30px 0 0;
  .carrousel-box{
    max-width: 800px;
    margin: 0 auto;
    ul{
      padding-bottom: 56.2790%;
      position: relative;
      overflow: hidden;
      li{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s $easeInOutSine;
        &.visible{
          opacity: 1;
          visibility: visible;
        }
        iframe{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .button-box{
    max-width: 500px;
    @media (min-width: $br-mobile) {
      max-width: none;
    }

    li{
      margin: 0 5px;
      width: 100%;
      @media (min-width: $br-mobile-portrait) {
        width: auto;
      }
      a{
        opacity: 0.75;
        &.disabled{
          opacity: 0.25;
        }
        &.visible{
          opacity: 1;
        }
      }
    }
  }
}
